import React, { useState, useEffect } from 'react'
import {Input, Button, message, Descriptions, Popconfirm} from "antd";
import {fetchRequest} from "../../../utils/Request";
import {url} from "../../../utils/url";
import {useRequest} from "@umijs/hooks";

interface requestParams{
    newAccDeviceCode:string,
    oldAccDeviceCode:string
}

interface popVisible {
    visible:boolean,
    condition:boolean,
}

export default function EquipmentAdd() {

    const [requestParams, setRequestParams] = useState<requestParams>({ newAccDeviceCode: '', oldAccDeviceCode:''});
    const [popVisible,setPopVisible] = useState<popVisible>({visible:false,condition:false});

    const addDevice = useRequest(addDeviceRequest, {
        manual: true,
        loadingDelay: 200
    })

    const newAccOnChange = (e:any) =>{
        setRequestParams({
             ...requestParams,
             newAccDeviceCode: e.target.value.toString()
        })
    }

    const oldAccOnChange = (e:any) =>{
        setRequestParams({
            ...requestParams,
            oldAccDeviceCode: e.target.value.toString()
        })
    }

    const addOnClick = () => {
        if(requestParams.newAccDeviceCode===""||requestParams.oldAccDeviceCode===""){
            message.error("请勿输入空值！");
        }
        else{
            addDevice.run(requestParams);
        }
    }


    //请求函数
    async function addDeviceRequest(params: requestParams) {
        // console.log(params)
        try {
            const json = await fetchRequest(url.DEVICE_ADD_NEW, params)
            if (json.success) {
                message.success(json.data);
            } else {
                message.destroy();
                message.error(json.errorMsg);
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const checkDeviceTypeSame = useRequest(checkDeviceTypeSameRequest, {
        manual: true,
        loadingDelay: 200
    })

    //判断设备是否为同一类型
    async function checkDeviceTypeSameRequest(params: requestParams) {
        // console.log(params)
        try {
            const json = await fetchRequest(url.CHECK_DEVICE_TYPE_SAME, params)
            if (json.success) {
                setPopVisible({
                    ...popVisible,
                    condition:json.data
                })
            } else {
                message.destroy();
                message.error(json.errorMsg);
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message);
        }
    }

    return (
        <div style={{ margin: '10px', padding: "14px"}}>
            <Descriptions title="新设备下发说明" bordered column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }} layout="vertical">
                <Descriptions.Item label="操作场景">学校新增设备，将老设备数据下发到新设备中</Descriptions.Item>
                <Descriptions.Item label="操作表名">access_card_dev_rel</Descriptions.Item>
                <Descriptions.Item label="操作说明">
                    将表中老设备门禁表中生效数据(状态1,4,6,9,10)，以新设备编码插入表中，并将状态改为4，put_count改为0，下发数据
                </Descriptions.Item>
                <Descriptions.Item label="状态说明">1-已生效，4-待推送，6-推送失败，9-绑卡中，10-绑卡失败</Descriptions.Item>
            </Descriptions>
            <div style={{ margin: '16px 0 16px', width:'60%'}}>
                <Input size="large" addonBefore="新设备" placeholder="请输入新设备编码" onChange={ newAccOnChange }/>
            </div>
            <div style={{ marginBottom: 16, width:'60%' }}>
                <Input size="large" addonBefore="老设备" placeholder="请输入老设备编码" onChange={ oldAccOnChange }/>
            </div>
            <Button size="large" type="primary"
                    loading={ addDevice.loading }
                    onClick={ addOnClick }
            >
                提交
            </Button>
        </div>

    )


}